import React from 'react';
import styles from './index.less';
import {connect} from 'dva';
import moment from 'moment';
import {EsriJSON, GeoJSON} from 'ol/format';
import FileSaver from 'file-saver';
// import ExcellentExport from 'excellentexport';

import stylecss from './index.css';
import {
  Button,
  Card,
  Modal,
  Form,
  Select,
  Dropdown,
  Radio,
  Layout,
  Menu,
  Input,
  List,
  message,
  Spin,
  DatePicker
} from 'antd';
import Toolbar from '@terrestris/react-geo/dist/Toolbar/Toolbar';
import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
import DigitizeButton from '@terrestris/react-geo/dist/Button/DigitizeButton/DigitizeButton';
import ToggleButton from '@terrestris/react-geo/dist/Button/ToggleButton/ToggleButton';

import Gmap from "@/utils/HshMap/Gmap";
import Glayers from "@/utils/HshMap/Glayers";
import Ginteraction from '@/utils/HshMap/Ginteraction';
import {pntStyle, fillStyle} from '@/utils/HshMap/Gstyle';
import InfiniteScroll from 'react-infinite-scroller';

const {Option} = Select;
const {Search} = Input;
const {Content, Sider} = Layout;
const {confirm} = Modal;
// const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

@Form.create()
@connect(({edit, birdsMonitor, layerSetting}) => ({...edit, birdsMonitor, layerSetting}))
class VectorEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isInitEdit: true,
      editLayerId: null,
      layerList: {},
      showData: false,
      showList: true,
      showInfo: false,
      showExp: false,
      loading: false,
      hasMore: true,
      key: 0,
      showAttr: false,
      attrCols: [],
      orgData: [],
      saveAttrLoading: false,
      curtableId: '',
      curObjectId: '',
      curFeature: null,
      editStatus: 'init',
      searchKeys: ''
    };
    this.map = new Gmap().map;
    this.interaction = new Ginteraction(this.map);
  }

  componentWillMount() {
    const {isInitEdit} = this.state;
    if (isInitEdit) {
      message.info('请从右侧选择图层，开始编辑！');
    }
  }

  componentDidMount() {
    const o = this;
    o.map = new Gmap('map').map;
    o.interaction = new Ginteraction(o.map);
    o.getLayers();
    // new PublicInterface().pubtabcolsList(o.props, {ifanalysis: 1}, function (data) {
    //   o.setState({
    //     pubtabcolsData: data
    //   })
    // });
  }

  getLayers = async () => {
    await this.props.dispatch({
      type: 'edit/getLayers',
      payload: {}
    });
  }

  handleInfiniteOnLoad = () => {
    const {results} = this.props;
    this.setState({
      loading: true,
    });
    if (results.length > 14) {
      message.warning('Infinite List loaded all');
      this.setState({
        hasMore: false,
        loading: false
      });
      return;
    }
  };

  itemMouseOver(id) {
    this.setState({
      ['img' + id]: require('./images/u2553_mouseOver.png'),
      ['itemStyle' + id]: {background: '#eee', padding: '15px 10px'}
    })
  }

  itemMouseOut(id) {
    this.setState({['img' + id]: require('./images/u2553.png'), ['itemStyle' + id]: {padding: '15px 10px'}})
  }

  goLocation(item) {
    let {curFeature, curObjectId, editLayerId, layerList, editStatus} = this.state;
    if (!layerList[editLayerId]) return;
    const {layerVector} = layerList[editLayerId];
    if (editStatus === 'search' && curFeature) {//清除历史定位样式
      curFeature.setStyle(null);
      // let tmp = layerVector.getSource().getFeatureById(curObjectId);
      // tmp.setStyle(null);
    }
    const {id, type} = item;
    let f = layerVector.getSource().getFeatureById(id);
    this.interaction.fly_to(f, type);
    this.setState({
      curFeature: f,
      curObjectId: id,
      editStatus: 'search'
    });
  }

  getImgSrc(id) {
    if (this.state['img' + id]) {
      return this.state['img' + id];
    } else {
      return require('./images/u2553.png');
    }
  }

  getItemStyle(id) {
    if (this.state['itemStyle' + id]) {
      return this.state['itemStyle' + id];
    } else {
      return {padding: '15px 10px'};
    }
  }

  showLayer = (e) => {
    let {isInitEdit, editLayerId, layerList} = this.state;
    const {id, url, tp, layerid, tableid, label} = e.target.attributes;
    //若选择图层，则设置编辑状态
    if (isInitEdit) {
      this.setState({isInitEdit: false});
    }
    //清理上次加载
    if (layerList[editLayerId]) {
      layerList[editLayerId].layerVector.setVisible(false);
      this.interaction.off_select_click(editLayerId);
    }
    let layId = id.value;
    if (layerList[layId]) {//已加图层则设置显示
      layerList[layId].layerVector.setVisible(true);
    } else {//首次加载
      const {dispatch, currentUser} = this.props;
      let vector = new Glayers().addVectorLayer('space/arcgisFeatureServerQuery', dispatch, ' status_cd=1 ', url.value, 4326);
      vector.set('id', layId);
      this.map.addLayer(vector);
      layerList[layId] = {'name': label.value, 'layerType': tp.value, 'layerVector': vector, 'url': url.value};

      dispatch({
        type: 'layerSetting/pubtabcolsList',
        payload: {tableId: tableid.value},
      }).then(cols => {
        if (!cols || !cols.length) return;
        const {userid, name} = currentUser;
        let newColumn = cols.map(item => {
          let {dictKey, columnName, dataDefault} = item;
          if (dictKey) {//查询鸟类名称
            dispatch({
              type: 'birdsMonitor/birdNamesQuery',
              payload: dictKey,
            });
          }
          let val = (columnName === 'created_staff') ? userid : (columnName === 'created_staff_name') ? name : dataDefault;
          let obj = Object.assign({value: val}, item);
          return obj;
        });
        this.setState({
          attrCols: newColumn
        })
      });
    }
    // const {layerType} = layerList[layId];
    // this.interaction.on_select_click(layId, layerType, this.handleSelected);
    this.setState({
      editLayerId: layId,
      key: new Date(),
      curtableId: tableid.value,
      showList: false,
      showData: false,
      searchKeys: ''
    });
  }

  handleExport = (e) => {
    const {form} = this.props;
    const {validateFields, getFieldsValue, resetFields} = form;
    validateFields({force: true}, (err) => {//表单验证
      if (err) return;
      let {fName} = getFieldsValue();
      const {editLayerId, layerList} = this.state;
      const {layerVector} = layerList[editLayerId];
      if (layerVector) {
        let fs = layerVector.getSource().getFeatures();
        let jsonStrs = new GeoJSON().writeFeatures(fs);
        let file = new File([jsonStrs], `${fName}.geojson`, {type: "text/plain;charset=utf-8"});
        FileSaver.saveAs(file);
        message.info('导出成功！');
        resetFields();//重置表单
        this.setState({
          showExp: false
        });
      }
    });
  }

  handleCancel = (e) => {
    console.log(`取消`);
    this.setState({showExp: false});
  }

  handleSearch = (value) => {
    const _self = this;
    const {editLayerId, layerList, searchKeys} = _self.state;
    if (!searchKeys) return;
    const {dispatch} = _self.props;
    this.setState({loading: true, hasMore: true})
    if (layerList[editLayerId]) {
      const {layerType, url} = layerList[editLayerId];
      let typeName = (layerType === "0") ? "点图层" : (layerType === "1") ? "线图层" : "区图层";
      dispatch({
        type: 'edit/queryLayer',
        payload: {
          url: url,
          keys: value,
          type: typeName
        }
      }).then(result => {
        _self.setState({loading: false, hasMore: false})
      });
      this.setState({showData: true, searchKeys: value});
      console.log(`检索：` + value);
    } else {
      message.info('请先从右侧选择图层！');
    }
  }

  hanldeSearchChange = e => {
    let keys = e.target.value;
    this.setState({searchKeys: keys});
  }

  //图层列表
  laysRender = () => {
    const {editLayerId, showList} = this.state;
    const {layers} = this.props;
    if (showList && layers.length) {
      return (
        <List className={styles.layList} style={{display: showList ? 'block' : 'none'}} split={false}
              dataSource={layers}
              renderItem={lay => {
                const {title, list} = lay;
                const rows = list.map((l, j) => {
                  const {id, name, type, url, tableId} = l;
                  let idx = `lay_${id}`;
                  //className={`layBtn ${idx === this.state.editLayerId ? "active" : ""}`}
                  return (
                    <Button key={j} id={idx} tableid={tableId} layerid={id} url={url} tp={type} label={name}
                            onClick={this.showLayer}
                            className={`${styles.layBtn}${idx === editLayerId ? "_selected" : ""} ${name.length>7?styles.longBtn:styles.shortBtn}`}>{name}</Button>);
                });
                return (<List.Item className={stylecss.listItem}>
                  <Card title={title} size="small" type="inner" className={styles.layCard}>{rows}</Card>
                </List.Item>);
              }}/>);
    }
  }

  //导出设置
  expRender = () => {
    const {showExp, editLayerId, layerList} = this.state;
    if (!showExp) return;
    const {name} = layerList[editLayerId];
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 14}};
    // initialValue: `${name}_file`
    return (<Modal
      title="导出设置"
      visible={showExp}
      onOk={this.handleExport}
      onCancel={this.handleCancel}
    >
      <Form {...formItemLayout}>
        <Form.Item label="输出名称">
          {getFieldDecorator('fName', {
            rules: [{required: true, message: '请输入文件名'}],
          })(
            <Input placeholder="输入文件名称"/>
          )}
        </Form.Item>
        <Form.Item label="输出格式">
          <Select defaultValue="json" placeholder="选择输出格式">
            <Option value="excel" disabled>excel(.xls)</Option>
            <Option value="csv" disabled>csv(.csv)</Option>
            <Option value="json">geojson(.geojson)</Option>
          </Select>
        </Form.Item>
        <Form.Item label="图层数据">
          <span className="ant-form-text">{name}</span>
        </Form.Item>
      </Form>
    </Modal>);
  }

  showLayersPanel = flag => {
    this.setState({showList: flag});
  }

  showInfoPanel = () => {
    const {curFeature, attrCols} = this.state;
    if (curFeature) {
      const attrs = curFeature.getProperties();
      attrCols.forEach(col => {
        if (col.ifEdit) {
          let val = attrs[col.columnName];
          col.value = val ? val : '';
        }
      });
      this.setState({
        attrCols: attrCols,
        showAttr: true
      });
    } else {
      // message.info('编辑属性，请先选图形！');
    }
  }

  showExpPanel = () => {
    this.setState({showExp: true});
    console.log(`导出设置`);
  }

  handleAttrInfoEdit = () => {
    this.queryServer()
  }

  handleAttrCancel = () => {
    const {editStatus} = this.state;
    if (editStatus === 'add') {
      confirm({
        content: '确认退出并删除该新增要素？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          //前端删除
          let arr = this.map.getLayers().getArray();
          for (let lay of arr) {
            if (lay.get('name') === 'react-geo_digitize') {
              lay.getSource().clear();
              break;
            }
          }
          this.setState({
            curFeature: null,
            showAttr: false
          });
        },
        onCancel: () => {

        }
      });
    } else {
      this.setState({
        showAttr: false
      })
    }
  }

  //新增图层弹出编辑属性框
  saveLayerAttr = async (values) => {
    try {
      const {props, state} = this;
      const {dispatch} = props;
      // console.log(values, '=============')
      values.tableId = state.curtableId;
      values.objectid = state.curObjectId || '';
      return await dispatch({
        type: 'edit/saveNewLayer',
        payload: values,
      })
    } catch (err) {
      // console.error(err,371)
    }
  }

  queryServer = async () => {
    let _this = this;
    const {curFeature, attrCols, editLayerId, layerList, editStatus, searchKeys} = _this.state;
    const {form, dispatch} = _this.props;
    form.validateFields({force: true}, (err, values) => {//表单验证
      if (err || !layerList[editLayerId]) return;
      _this.setState({saveAttrLoading: true});
      let newData = values;
      for (let key in newData) {
        if (newData[key]._isAMomentObject) {
          newData[key] = newData[key].format('YYYY-MM-DD hh:mm:ss');
        }
        if (editStatus === 'edit' && newData[key].ifEdit && curFeature[key]) {
          curFeature[key] = newData[key];
        }
      }
      const {url, layerVector} = layerList[editLayerId];
      if (editStatus === 'add') {
        curFeature.setProperties({'STATUS_CD': 1});
        let fs = '[' + new EsriJSON().writeFeature(curFeature, {
            featureProjection: _this.map.getView().getProjection()
          }) + ']';
        dispatch({
          type: 'edit/addFeature',
          payload: {
            url: url,
            fs: fs
          }
        }).then(oid => {
          _this.setState({
            curObjectId: oid
          });
          let arr = this.map.getLayers().getArray();
          for (let lay of arr) {
            if (lay.get('name') === 'react-geo_digitize') {
              lay.getSource().clear();
              break;
            }
          }
          layerVector.getSource().clear();
          //编辑属性弹框
          _this.saveLayerAttr(newData).then(res => {
            if (res.code == 0) {
              this.handleSearch(searchKeys);
              form.resetFields();//重置表单信息
              message.success(res.msg || '保存成功');
            } else {
              message.error(res.msg || '保存失败');
            }
            _this.setState({
              editStatus: 'init',
              curFeature: null,
              curObjectId: '',
              saveAttrLoading: false,
              showAttr: false
            });
          });
        });
      } else {
        //编辑属性弹框
        _this.saveLayerAttr(newData).then(res => {
          if (res.code == 0) {
            layerVector.getSource().clear();
            message.success(res.msg || '保存成功');
            form.resetFields();//重置表单信息
          } else {
            message.error(res.msg || '保存失败');
          }
          _this.setState({
            editStatus: 'init',
            curFeature: null,
            curObjectId: '',
            saveAttrLoading: false,
            showAttr: false
          });
        });
      }
    })
  }

  //编辑属性弹框
  editAttrRender = () => {
    const {showAttr, attrCols} = this.state;
    if (showAttr && attrCols.length) {
      const formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 14}};
      const {getFieldDecorator} = this.props.form;
      const {birdNames} = this.props.birdsMonitor;
      return (<Modal
        title="标记信息设置"
        // closable
        visible={showAttr}
        onOk={this.handleAttrInfoEdit}
        onCancel={this.handleAttrCancel}
      >
        <Spin tip="保存中..." spinning={this.state.saveAttrLoading}>
          <Form {...formItemLayout} onSubmit={this.handleAttrInfoEdit}>
            {
              attrCols.map((item, index) => {
                if (item.ifEditDisplay == 1) {
                  if (item.dictKey && item.dictKey != '') {
                    //查询鸟类名称
                    return (
                      <Form.Item key={index} label={item.description}>
                        {getFieldDecorator(item.columnName, {
                          initialValue: item.value
                        })(
                          <Select style={{width: 120}} disabled={item.ifEdit == 1 ? false : true}>
                            {
                              birdNames.map(b => (
                                <Option value={b.name}>{b.name}</Option>
                              ))
                            }
                          </Select>
                        )}
                      </Form.Item>
                    )
                  }
                  if (item.columnType == "timestamp") {
                    return (
                      <Form.Item key={index} label={item.description}>
                        {getFieldDecorator(item.columnName, {
                          initialValue: item.value ? moment(item.value) : moment()
                        })(
                          <DatePicker
                            disabled={item.ifEdit == 1 ? false : true}
                            format="YYYY-MM-DD HH:mm:ss"
                            showTime={{defaultValue: moment('00:00:00', 'HH:mm:ss')}}
                          />
                        )}
                      </Form.Item>
                    )
                  } else {
                    return (
                      <Form.Item key={index} label={item.description}>
                        {getFieldDecorator(item.columnName, {
                          initialValue: item.value
                        })(
                          <Input
                            disabled={item.ifEdit == 1 ? false : true}
                            placeholder={`输入` + item.description}
                          />
                        )}
                      </Form.Item>
                    )
                  }
                }
              })
            }
          </Form>
        </Spin>
      </Modal>);
    }
  }

  //监听绘制结束
  drawFun = (e) => {
    this.setState({
      editStatus: 'add',
      curFeature: e.feature,
    });
    this.showInfoPanel();
  }

  handleSelectedEditGeometry = e => {
    let f = e.selected[0];
    this.setState({
      editStatus: 'edit',
      curFeature: f,
      curObjectId: f ? f.get('objectid') : ''
    });
  }

  handleSelectedEditProperties = e => {
    let f = e.selected[0];
    this.setState({
      editStatus: 'edit',
      curFeature: f,
      curObjectId: f ? f.get('objectid') : '',
      showData: false,
      searchKeys: ''
    });
    this.showInfoPanel();
  }

  handleSwitch = flag => {
    const {isInitEdit, editLayerId, layerList, curFeature, editStatus} = this.state;
    if (isInitEdit) return;
    if (flag) {
      if (editStatus === 'search' && curFeature) {
        curFeature.setStyle(null);
      }
      message.info('编辑属性，请先选图形！');
      this.interaction.on_select_click(editLayerId, layerList[editLayerId].layerType, this.handleSelectedEditProperties);
    } else {
      this.interaction.off_select_click(editLayerId);
    }
  }

  drawUpdate = e => {
    const {dispatch} = this.props;
    const {curFeature, editLayerId, layerList, searchKeys} = this.state;
    const {url, layerVector} = layerList[editLayerId];
    let fs = '[' + new EsriJSON().writeFeature(curFeature, {
        featureProjection: this.map.getView().getProjection()
      }) + ']';
    dispatch({
      type: 'edit/editFeature',
      payload: {
        url: url,
        fs: fs
      }
    }).then(oid => {
      if (oid) {
        this.handleSearch(searchKeys);
        message.info('保存成功！');
      } else {
        message.error('保存失败！');
      }
    });
  }

  drawRemove = e => {
    confirm({
      content: '确认是否删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        let oid = e.selected[0].get('objectid');
        const {dispatch} = this.props;
        let {editLayerId, layerList, searchKeys} = this.state;
        if (layerList[editLayerId]) {
          const {url, layerVector} = layerList[editLayerId];
          dispatch({
            type: 'edit/delFeature',
            payload: {
              url: url,
              oid: oid
            }
          }).then(res => {
            if (res) {
              let fs = layerVector.getSource().getFeatures();
              fs.splice(fs.findIndex(f => f.get('objectid') === oid), 1);
              layerVector.getSource().clear();
              layerVector.getSource().addFeatures(fs);
              this.handleSearch(searchKeys);
              this.setState({
                editStatus: 'delete',
                curFeature: null,
                curObjectId: ''
              });
              message.info('删除成功！');
            } else {
              message.error('删除失败！');
            }
          });
        }
      },
      onCancel: () => {
      }
    });
  }

  infoClear = flag => {
    if (!flag) return;
    const {curFeature, editStatus} = this.state;
    if (editStatus === 'search' && curFeature) {
      curFeature.setStyle(null);
    }
    this.setState({
      curFeature: null,
      curObjectId: '',
      editStatus: 'delete',
      showData: false,
      searchKeys: ''
    });
  }

  styleClear = flag => {
    if (!flag) return;
    const {curFeature, editStatus} = this.state;
    if (editStatus === 'search' && curFeature) {
      curFeature.setStyle(null);
    }
    this.setState({
      showData: false,
      searchKeys: ''
    });
  }

  render() {
    const {results} = this.props;
    const {isInitEdit, editLayerId, layerList, showData, loading, hasMore, searchKeys} = this.state;
    const layList = this.laysRender();
    const editAttrInfo = this.editAttrRender();
    const layExp = this.expRender();
    let lay = layerList[editLayerId];
    let layType = (lay && lay.layerType === "0") ? "Point" : (lay && lay.layerType === "1") ? "Line" : "Polygon";
    return (
      <Layout>
        <Sider width={236} style={{background: 'rgba(255,255,255,0.9)', padding: '0',borderRight:'1px solid #ddd', position: 'absolute',left: 0,zIndex: 999,height: 'calc(100% - 110px)'}} className={styles.left}>
          <div style={{background: '#EBF5EF',height: '40px',lineHeight: '40px',paddingLeft: '20px'}}><span
            style={{fontSize: '12px',color:'#40AF59'}}>矢量编辑</span></div>
            <p style={{ fontSize: '12px', color: '#333', margin: '15px 0 0 20px' }}>请在右侧选择图层：</p>
          <Search placeholder="输入名称搜索" className={styles.search} value={searchKeys}
                  onSearch={this.handleSearch} onChange={this.hanldeSearchChange} />
          <div className="demo-infinite-container">
            {/*<div style={{display: !this.state.showData ? "block" : "none"}}>未检索到结果</div>*/}
            <InfiniteScroll
              initialLoad={true}
              pageStart={0}
              loadMore={this.handleInfiniteOnLoad}
              hasMore={!loading && hasMore}
              useWindow={false}
              style={{display: showData ? 'block' : 'none'}}
            >
              <List
                dataSource={results}
                renderItem={item => (
                  <List.Item key={item.id} style={this.getItemStyle(item.id)}
                             onClick={() => this.goLocation(item)} onMouseOver={() => this.itemMouseOver(item.id)}
                             onMouseOut={() => this.itemMouseOut(item.id)}>
                    <List.Item.Meta
                      avatar={
                        <img src={this.getImgSrc(item.id)}/>
                      }
                      title={item.name}
                      description={<div style={{width: '220px'}}><span
                        style={{color: 'rgba(0, 176, 98, 0.847)'}}>[{item.type}]</span> {item.description}</div>}
                    />
                  </List.Item>
                )}
              >
                {loading && hasMore && (
                  <div className={styles.loadingContainer}>
                    <Spin/>
                  </div>
                )}
              </List>
            </InfiniteScroll>
          </div>

        </Sider>
        <Layout style={{padding: '0'}}>
          <Content
            style={{
              background: '#fff',
              padding: 0,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Toolbar key={this.state.key} className={styles.tbar}>
              <ToggleGroup>
                {/*<DigitizeButton name="添加标记" map={this.map} drawType="Polygon" drawStyle={this.fillStyle}>*/}
                <DigitizeButton className={stylecss.toolsBtn} name="add" tooltip="添加标记" map={this.map}
                                drawType={layType} disabled={isInitEdit} onDrawEnd={this.drawFun}
                                onToggle={this.infoClear}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.27 19"><defs></defs><title>资源 1</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M14.07,19h-.21L8.63,16.49,3.41,19H3.19A3.33,3.33,0,0,1,0,15.54V3.45A3.33,3.33,0,0,1,3.19,0H14.07a3.33,3.33,0,0,1,3.2,3.45V15.54A3.34,3.34,0,0,1,14.07,19ZM8.63,14.59l5.62,2.68a1.64,1.64,0,0,0,1.29-1.73V3.45a1.6,1.6,0,0,0-1.47-1.72H3.19A1.6,1.6,0,0,0,1.73,3.45V15.54A1.7,1.7,0,0,0,3,17.27Z"/><path class="cls-1" d="M12.91,14.2,8.59,12l-4.4,2.16L5.53,9.8,2.42,6.35l4.36.08,1.9-3.5,1.81,3.55,4.36,0L11.66,9.89ZM8.59,10.53l2.25,1.17-.61-2.2,1.64-1.73-2.2,0-1-2-1.12,2-2.2-.05,1.6,1.78-.69,2.15Z"/></g></g></svg>
                  {/* <svg style={{width: '24px', height: '24px'}} class="icon" width="24px" height="24.00px"
                       viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M546.133333 477.866667h136.533334v68.266666h-136.533334v136.533334h-68.266666v-136.533334h-136.533334v-68.266666h136.533334v-136.533334h68.266666v136.533334z m-34.133333 341.333333a307.2 307.2 0 1 0 0-614.4 307.2 307.2 0 0 0 0 614.4z m0 68.266667C304.64 887.466667 136.533333 719.36 136.533333 512S304.64 136.533333 512 136.533333s375.466667 168.106667 375.466667 375.466667-168.106667 375.466667-375.466667 375.466667z"/>
                  </svg> */}
                </DigitizeButton>
                <DigitizeButton className={stylecss.toolsBtn} name="edit" tooltip="编辑图形" map={this.map} editType="Edit"
                                disabled={isInitEdit} onFeatureSelect={this.handleSelectedEditGeometry}
                                onModifyEnd={this.drawUpdate} onTranslateEnd={this.drawUpdate}
                                onToggle={this.styleClear}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.49"><defs></defs><title>编辑</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M16.46,8.25v6.59a1.66,1.66,0,0,1-1.64,1.65H1.65A1.66,1.66,0,0,1,0,14.84V1.65A1.66,1.66,0,0,1,1.65,0H7.41a.78.78,0,0,1,.82.83.78.78,0,0,1-.82.82H2.47a.78.78,0,0,0-.82.83V14a.78.78,0,0,0,.82.83H14a.78.78,0,0,0,.83-.83V8.25a.82.82,0,1,1,1.64,0Z"/><path class="cls-1" d="M16.3.17a.93.93,0,0,1-.17,1.32l-9,9.06a.83.83,0,0,1-1.15.33A.82.82,0,0,1,5.6,9.73c.08-.08.16-.25.33-.33l9-9.07A1.12,1.12,0,0,1,16.3.17Z"/></g></g></svg>
                  {/* <svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M999.179148 82.557646l-58.333777-58.333777a82.554235 82.554235 0 0 0-116.752839 0L767.549704 80.766697 942.63632 255.853313l56.542828-56.542828a82.554235 82.554235 0 0 0 0-116.752839z m-54.581312 862.896434H76.328554V77.014232h553.48862V0.770961H78.887053A78.716486 78.716486 0 0 0 0 79.487447v865.966633c0 43.494483 35.222003 78.716486 78.716486 78.716487h865.966633c43.494483 0 78.716486-35.307286 78.716487-78.716487V394.353393h-78.716487v551.100687zM852.833005 324.762219L698.555514 170.570012 281.434892 587.690635l0.255849 0.25585-25.32914 147.02841a27.802356 27.802356 0 0 0 32.237088 32.151804l146.687277-25.58499 0.341133 0.341133L852.833005 324.762219z"/>
                  </svg> */}
                </DigitizeButton>
                <ToggleButton className={stylecss.toolsBtn} name="info" tooltip="编辑属性" onToggle={this.handleSwitch}
                              disabled={isInitEdit} pressed={false}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.29 18.29"><defs></defs><title>属性信息</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M9.15,0a9.15,9.15,0,1,0,9.14,9.15A9.14,9.14,0,0,0,9.15,0Zm0,16.83a7.69,7.69,0,1,1,7.68-7.68A7.68,7.68,0,0,1,9.15,16.83Z"/><path class="cls-1" d="M8.21,4.71a.94.94,0,1,0,.94-.93.94.94,0,0,0-.94.93Z"/><path class="cls-1" d="M10.08,13.62a.89.89,0,0,1-.89.89H9.1a.89.89,0,0,1-.89-.89V7.48a.89.89,0,0,1,.89-.89h.09a.89.89,0,0,1,.89.89Z"/></g></g></svg>
                  {/* <svg style={{width: '20px', height: '20px'}} class="icon" width="24px" height="24.00px"
                       viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M511.7 64C265.6 64 64.2 265.4 64.2 511.7s201.4 447.6 447.6 447.6 447.5-201.5 447.5-447.6S758 64 511.7 64z m0 828.1c-208.9 0-380.5-171.6-380.5-380.5S302.8 131 511.7 131s380.5 171.6 380.5 380.5-171.5 380.6-380.5 380.6z m85.9-261c-11.3 0-52.3 63.4-78.3 63.4-7.5 0-7.5-3.8-7.5-11.3 0-11.3 7.5-29.8 14.9-41l55.9-145.5c26.1-70.8-7.5-89.5-41-89.5-44.8 0-85.8 22.4-115.7 48.5-11.3 11.3-33.6 48.5-33.6 59.8 0 3.8 3.8 11.3 11.3 11.3 14.9 0 41-70.8 70.8-70.8 7.5 0 14.9 7.5 7.5 18.6L426 605.2c-3.8 11.3-33.6 55.9-33.6 89.5 0 29.8 18.6 59.8 48.5 59.8 78.3 0 167.8-93.3 167.8-111.8-3.7-8-7.4-11.6-11.1-11.6z m-14.9-361.9c-33.6 0-63.4 26.1-63.4 59.8 0 29.8 22.4 52.3 52.3 52.3 33.6 0 63.4-26.1 63.4-59.8 0-33.7-22.5-52.3-52.3-52.3z"/>
                  </svg> */}
                </ToggleButton>
                <DigitizeButton className={stylecss.toolsBtn} name="del" tooltip="删除图形" map={this.map} editType="Delete"
                                disabled={isInitEdit} onFeatureRemove={this.drawRemove} onToggle={this.infoClear}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.99 15.76"><defs></defs><title>删除</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M14,3.68a1.54,1.54,0,0,0-1.5-1.58H11V1.58A1.54,1.54,0,0,0,9.5,0h-5A1.55,1.55,0,0,0,3,1.58V2.1H1.49A1.54,1.54,0,0,0,0,3.69,1.58,1.58,0,0,0,1,5.16v8.5a2,2,0,0,0,2,2.1h8a2.05,2.05,0,0,0,2-2.1V5.16a1.58,1.58,0,0,0,1-1.48M4,1.58a.51.51,0,0,1,.49-.53h5a.52.52,0,0,1,.51.53V2.1H4Zm8,12.08a1,1,0,0,1-1,1.05H3a1,1,0,0,1-1-1.05V5.25H12Zm.5-9.46h-11A.51.51,0,0,1,1,3.68a.54.54,0,0,1,.59-.53h11a.52.52,0,0,1,.41.53.51.51,0,0,1-.5.52"/><path class="cls-1" d="M4.49,12.87a.51.51,0,0,0,.5-.52V7.62a.51.51,0,0,0-.5-.53.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52m2.5,0a.51.51,0,0,0,.5-.52V7.62A.51.51,0,0,0,7,7.09a.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52m2.5,0a.51.51,0,0,0,.5-.52V7.62a.51.51,0,0,0-.5-.53.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52"/></g></g></svg>
                  {/* <svg style={{width: '18px', height: '18px'}} class="icon" width="24px" height="24.00px"
                       viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M517.59 21.609c-100.299 0-181.703 79.514-185.167 179.34H98.603c-25.979 0-47.235 21.099-47.235 47.236 0 25.98 21.099 47.237 47.236 47.237h52.117v528.416c0 99.196 67.233 180.285 150.37 180.285h423.55c82.98 0 150.37-80.616 150.37-180.285V295.737h47.236c25.98 0 47.236-21.1 47.236-47.237 0-25.98-21.099-47.236-47.236-47.236H702.441C699.449 101.124 617.888 21.61 517.59 21.61z m-96.677 179.34c3.464-51.172 45.19-90.85 96.834-90.85s93.37 39.835 96.362 90.85H420.913z m-119.98 714.842c-29.444 0-61.88-37.789-61.88-91.953V295.737h547.311V824.31c0 54.007-32.436 91.954-61.88 91.954H300.933v-0.473z m0 0"/>
                    <path
                      d="M364.387 802.267c21.57 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.572 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.32 48.653 39.364 48.653z m142.496 0c21.571 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.571 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.793 48.653 39.364 48.653z m149.896 0c21.571 0 39.364-21.571 39.364-48.653V476.022c0-27.082-17.635-48.654-39.364-48.654-21.571 0-39.363 21.572-39.363 48.654v277.592c0 26.924 17.162 48.653 39.363 48.653z m0 0"/>
                  </svg> */}
                </DigitizeButton>
                <SimpleButton className={stylecss.toolsBtn} tooltip="导出图层" onClick={this.showExpPanel}
                              disabled={isInitEdit}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5"><defs></defs><title>下载</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M15.75,10.5a.76.76,0,0,0-.75.75V15H1.5V11.25a.76.76,0,0,0-.75-.75.76.76,0,0,0-.75.75v4.5a.76.76,0,0,0,.75.75h15a.76.76,0,0,0,.75-.75v-4.5A.76.76,0,0,0,15.75,10.5Z"/><path class="cls-1" d="M7.32,13.26l0,.05a.75.75,0,0,0,1.06-.05l4.12-4.5a.75.75,0,0,0-1.1-1L9,10.41V.75a.75.75,0,0,0-1.5,0V11.23L4.3,7.74a.75.75,0,0,0-1.1,1Z"/></g></g></svg>
                  {/* <svg style={{width: '18px', height: '18px'}} class="icon" width="24px" height="24.00px"
                       viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M470.8 104.7c0-22.5 18.2-40.7 40.7-40.7 22.5 0 40.7 18.2 40.7 40.7v569.9c0 22.5-18.2 40.7-40.7 40.7-22.5 0-40.7-18.2-40.7-40.7V104.7z m0 0"/>
                    <path
                      d="M877.9 878.1V674.6c0-22.5 18.2-40.7 40.7-40.7 22.5 0 40.7 18.2 40.7 40.7v244.3c0 22.5-18.2 40.7-40.7 40.7H104.4c-22.5 0-40.7-18.2-40.7-40.7V674.6c0-22.5 18.2-40.7 40.7-40.7 22.5 0 40.7 18.2 40.7 40.7v203.5h732.8z m0 0"/>
                    <path
                      d="M685 484.1c15.3-16.6 41.2-17.7 57.8-2.4 16.6 15.3 17.7 41.2 2.4 57.8L521.3 783.7c-7.7 8.5-18.7 13.3-30.1 13.3-11.5 0-22.4-4.8-30.1-13.3l-224-244.3c-15.3-16.6-14.2-42.5 2.4-57.8 16.6-15.3 42.5-14.2 57.8 2.4l193.8 211.7L685 484.1z m0 0"/>
                  </svg> */}
                </SimpleButton>
                <ToggleButton className={stylecss.toggleBtn} name="layers" tooltip="图层" onToggle={this.showLayersPanel}>
                  <svg style={{width: '18px', height: '18px'}} class="icon" width="24px" height="24.00px"
                       viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M929.792 514.048l-409.6 190.464-423.936-204.8c-18.432-10.24-40.96-2.048-51.2 16.384s-2.048 40.96 16.384 51.2L501.76 778.24c6.144 2.048 12.288 4.096 16.384 4.096s12.288-2.048 14.336-4.096l425.984-196.608c18.432-10.24 26.624-32.768 18.432-51.2-4.096-16.384-26.624-24.576-47.104-16.384z"/>
                    <path
                      d="M63.488 344.064l440.32 210.944c6.144 2.048 12.288 4.096 16.384 4.096s12.288-2.048 14.336-4.096L960.512 358.4c12.288-6.144 20.48-18.432 22.528-34.816 0-14.336-8.192-28.672-20.48-34.816L534.528 73.728c-10.24-6.144-22.528-6.144-34.816 0L63.488 276.48c-12.288 6.144-20.48 18.432-22.528 34.816 2.048 12.288 10.24 24.576 22.528 32.768z m450.56-196.608L860.16 323.584 522.24 479.232 165.888 309.248l348.16-161.792zM929.792 686.08l-409.6 190.464L96.256 673.792c-18.432-10.24-40.96-2.048-51.2 16.384s-2.048 40.96 16.384 51.2L501.76 952.32c6.144 2.048 12.288 4.096 16.384 4.096s12.288-2.048 14.336-4.096l425.984-196.608c18.432-10.24 26.624-32.768 18.432-51.2-4.096-18.432-26.624-26.624-47.104-18.432z"/>
                  </svg>
                </ToggleButton>
                {/* <Dropdown overlay={layList} trigger={['click']}>
                 <Button icon="download"/>
                 </Dropdown>*/}
              </ToggleGroup>
            </Toolbar>
            {layList}{layExp}{editAttrInfo}
            <div id='map' className={styles.map}></div>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(VectorEditor);
// export default VectorEditor;
